<template>
  <el-container style="padding:20px;height: 100%">
    <el-button @click="back"><el-icon><ArrowLeft/></el-icon></el-button>
    <!--侧边栏——步骤条-->
    <el-aside style="padding-left: 5%;padding-top: 3%;">
      <el-steps direction="vertical"  :active="stepActive" style="height: 450px;position: fixed">
        <el-step title="选择门诊" />
        <el-step title="选择日期" />
        <el-step title="选择医生" />
        <el-step title="选择时段" />
        <el-step title="挂号支付" />
        <el-step title="成功挂号" />
      </el-steps>
    </el-aside>

    <!--操作面板-->
    <el-main style="height: 100%;">
      <!--路由出口-->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>


<script setup>
import { ref } from 'vue'
import mitt from '@/utils/mitt.js'
import {useRoute, useRouter} from "vue-router";
import {ArrowLeft} from "@element-plus/icons-vue";
const emitter = mitt
const route = useRoute();
const router = useRouter();
const stepActive = ref(0)

const back = () =>{

  if (route.name === 'ChooseRegDoctor'){
    emitter.emit('next', 0);
    console.log('back触发')

  }
  if (route.name === 'RegisterConfirm'){
    emitter.emit('next', 1);
    console.log('back触发')

  }
  router.back();
}

emitter.on('next',(step)=>{
    stepActive.value = step
})
if(route.name === 'RegisterAppoint')
  stepActive.value = 0;

</script>


<style scoped>

</style>
